<template>
  <div class="page-container">
    <DynamicForm :config="dyConfig" :questions="dyQues" ref="dynamicForm1" />
    <DynamicTable :tables="dyTable" :config="dyTableConfig" :icons="dyIcons" ref="planRef">
      <!--状态-->
      <template #stateSwitch="{ record }">
        <!-- <a-switch v-model:checked="record.name10" checked-children="开" un-checked-children="关" checkedValue="1" unCheckedValue="0" style="margin-bottom: 5px" @change="statusChange" /> -->
        <a-switch :checked="record.status" checked-children="开" un-checked-children="关" :checked-value="1" :un-checked-value="0" @change="(value) => statusChange(record, value)" />
      </template>
      <template #frequencyTime="{ record, column }">
        <span>{{ frequencyTime(record, column) }}</span>
      </template>
      <template #deptName="{ record }">
        <span :title="filterDept(record)">{{ filterDept(record) }}</span>
      </template>
      <template #menName="{ record }">
        <span :title="filterDept(record)">{{ filterMen(record) }}</span>
      </template>
    </DynamicTable>
    <AddPlan v-model:visible="state.showAdd" v-if="state.showAdd" :data="state.showData" :show-type="state.showType" @handleEdit="handleEdit" />
  </div>
</template>

<script lang="ts" setup>
import { createVNode, getCurrentInstance, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
import { DynamicForm } from '@/components/public-template';
import { DynamicTable } from '@/components/public-template';
import { DYNAMICLOCALICONS, DYNAMICLOCALTABLE } from '@/mixins/subject/subject-types';
import { filter } from 'rxjs/operators';
import AddPlan from './components/addPlan.vue';
import indexService from './index.service';
import { Api, planUpdateStatus } from '@/config/api/archivesCollectPlan';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { dictionaryFn, timeFilter } from '@/filters/index';

const state = reactive({
  showAdd: false,
  showType: '',
  showData: null,
  departmentList: []
});
const planRef = ref(null);
const dyConfig: any = {
  name: 'planTable',
  queryUrl: 'TokenAuth/Authenticate',
  addUrl: 'TokenAuth/Authenticate',
  labelCol: 6,
  wrapperCol: 18,
  grid: 8,
  style: 'table-form',
  cancelSave: true
};
const dyTableConfig: any = {
  name: 'planTable',
  queryUrl: Api.planPage,
  protType: 'post',
  isScreen: true,
  rowSelection: {
    type: 'checkbox'
  },
  scroll: {
    x: 2000
  }
};
function filterDept(record) {
  if (!record.dept.length) {
    return '';
  }
  return record.dept.map((obj) => obj.executorName).join(',');
}

function filterMen(record) {
  if (!record.men.length) {
    return '';
  }
  return record.dept.map((obj) => obj.executorName).join(',');
}

function frequencyTime(record, column) {
  if (!record.frequencyNum) {
    return '';
  }
  return record.frequencyNum + dictionaryFn({ filterName: column.state.filterName }, record.frequencyUnit);
}
const dyQues: any = reactive(indexService.getQuestions());
const dyTable: any = reactive(indexService.getTables());
const dyIcons: any = reactive(indexService.getIcons());
// 监听table
const { proxy }: any = getCurrentInstance();
const subscribeSub = proxy.$NotificationPubSub
  .getParams()
  .pipe(filter((res) => res !== 0))
  .subscribe((item: any) => {
    if (item.key === DYNAMICLOCALICONS) {
      state.showAdd = true;
      state.showType = 'ADD';
      state.showData = null;
    } else if (item.key === DYNAMICLOCALTABLE) {
      state.showAdd = true;
      state.showType = 'VIEW';
      state.showData = item.value.data;
    }
  });

// 更改状态时触发
function statusChange(record, value) {
  Modal.confirm({
    title: '提示',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    cancelText: '取消',
    content: '是否确定修改状态？',
    onOk() {
      const params = record.id;
      planUpdateStatus(params).then((result) => {
        if (result.success) {
          message.success('修改成功');
          planRef.value.getData();
        }
      });
    }
  });
}

// 档案计划编辑
function handleEdit(data) {
  state.showType = 'EDIT';
  state.showAdd = true;
  state.showData = data;
}

onBeforeUnmount(() => {
  subscribeSub && subscribeSub.unsubscribe();
  proxy.$NotificationPubSub.clearParams();
});
</script>

<style lang="less" scoped></style>
